<template>
  <div class="sidebar">
    <div class="context">
      <div class="logo">
        <img src="@/assets/cun-lv.png" alt="logo"/>
      </div>
      <div class="autograph">
        <div><label>您好，欢迎来到</label></div>
        <div><label>自由之声</label></div>
      </div>
      <div class="net-music">
        <span><label>发现音乐</label></span>
        <div :class="isSelectedList[0] ? 'active' : 'not-active'" @click="goPage('home')">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouyeweixuanzhong"></use>
            </svg>
          </span>
          <span>&nbsp;&nbsp;首页</span>
        </div>
        <div :class="isSelectedList[1] ? 'active' : 'not-active'" @click="goPage('songSheetList')">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yinle"></use>
            </svg>
          </span>
          <span>&nbsp;&nbsp;歌单</span>
        </div>
        <div :class="isSelectedList[2] ? 'active' : 'not-active'" @click="goPage('singerList')">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-renxiang"></use>
            </svg>
          </span>
          <span>&nbsp;&nbsp;歌手</span>
        </div>
        <div :class="isSelectedList[3] ? 'active' : 'not-active'" @click="goPage('home')" aria-disabled="true"
             style="cursor: not-allowed;pointer-events: none">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-maikefeng"></use>
            </svg>
          </span>
          <span>&nbsp;&nbsp;播客</span>
        </div>
      </div>
      <div class="local-music">
        <span><label>我的音乐</label></span>
        <div :class="isSelectedList[4] ? 'active' : 'not-active'" @click="goPage('list')">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiazai"></use>
            </svg>
          </span>
          <span>
            &nbsp;&nbsp;本地与下载
          </span>
        </div>
        <div :class="isSelectedList[5] ? 'active' : 'not-active'" @click="goPage('collection')">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuifanshu"></use>
            </svg>
          </span>
          <span>
            &nbsp;&nbsp;我喜欢的音乐
          </span>
        </div>
        <div :class="isSelectedList[6] ? 'active' : 'not-active'" @click="goPage('history')">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-lishijilu"></use>
            </svg>
          </span>
          <span>
            &nbsp;&nbsp;历史记录
          </span>
        </div>
        <div :class="isSelectedList[7] ? 'active' : 'not-active'" @click="goPage('create')" aria-disabled="true"
             style="cursor: not-allowed;pointer-events: none">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tianjia"></use>
            </svg>
          </span>
          <span>
            &nbsp;&nbsp;创建歌单
          </span>
        </div>
      </div>

      <div class="underline">
        <hr/>
      </div>

      <div class="recommend">
        <div @click="test">
          <span>
            创建歌单&nbsp;&nbsp;
          </span>
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-redu"></use>
            </svg>
          </span>
        </div>
      </div>

      <div class="booster">
        <div>
          <span>
            情绪助推器&nbsp;&nbsp;
          </span>
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaolian"></use>
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute, useRouter} from "vue-router";
import {getCurrentInstance, onMounted, reactive, watch} from "vue";

export default {
  name: "Sidebar",
  description: {
    // 左侧栏
  },
  setup(props, context) {
    let router = useRouter();
    let route = useRoute();

    let isSelectedList = reactive([
      false, false, false, false, false, false, false, false
    ])

    const goPage = (page) => {
      //context.emit("toPage", page);
      switch (page) {
        case "list":
          router.push({
            name: "local",
            //path: "/list/local",
            query: {
              type: "local",
            }
          })
          break;
        case "net":
          router.push({
            name: "net",
            query: {
              type: "net",
            }
          })
          break;
        case "history": {
          router.push({
            name: "history",
            query: {
              type: "history",
            }
          })
          break;
        }
        case "collection": {
          router.push({
            name: "collection",
            query: {
              type: "collection",
            }
          })
          break;
        }
        default:
          router.push({
            name: page,
          })
      }
    }
    watch(route, (newValue, oldValue) => {
      for (const index in isSelectedList) {
        isSelectedList[index] = false
      }
      switch (newValue.name) {
        case "home":
          isSelectedList[0] = true;
          break;
        case "list":
        case "songSheetList":
          isSelectedList[1] = true;
          break;
        case "singerList":
          isSelectedList[2] = true;
          break;
        case "local":
          isSelectedList[4] = true;
          break;
        case "collection":
          isSelectedList[5] = true;
          break;
        case "history":
          isSelectedList[6] = true;
          break;
        case "net":
          break;
      }
    }, {immediate: true})
    return {
      isSelectedList,
      goPage,
    }
  },
}
</script>

<style scoped lang="less">
@import url("@/assets/less/1.less");

@radius: 38px;

svg {
  .icon-min(@c:@fbc);
}

.sidebar {
  position: relative;
  width: @sw;
  height: 862px;
  background-color: @fc;
  border-radius: @radius;

  .context {
    position: absolute;
    top: 28px;
    left: 28px;
    /*margin-top: 28px;
    margin-left: 28px;*/
    width: 100%-28px;
    font-size: 14px;
    color: @fbc;

    .logo {
      width: 62px;
      height: 62px;
    }

    .autograph {
      margin-top: 20px;
      color: @ffc;

      div:nth-child(1) {
        label {
          line-height: 14px;
        }
      }

      div:nth-child(2) {
        margin-top: 14px;
        height: 16px;

        label {
          font-size: 16px;
          line-height: 16px;
        }
      }
    }

    .music(@height) {
      height: @height;
      margin-top: 40px;
      text-align: left;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-between;

      span label {
        color: @ffc;
      }

      div {
        position: relative;
        z-index: 1;
        //padding: 4px 0 2px 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        //align-items: stretch;
        align-items: center;
        cursor: pointer;
        height: 30px;
        border-radius: 5px;
        border: none;

        span:first-child {
          margin-left: 10px;
        }
      }
    }

    .net-music {
      .music(200px);
    }

    .local-music {
      .music(200px);
    }

    .underline {
      margin-top: 30px;

      hr {
        border: none;
        height: 1px;
        background-color: @fbc;
      }
    }

    // align-items: flex-start | flex-end | center | baseline | stretch
    .recommend-booster(@s) {
      div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }

      span svg {
        .icon-min(@s)
      }
    }

    .recommend {
      margin-top: 30px;
      .recommend-booster(28px);

    }

    .booster {
      margin-top: 20px;
      .recommend-booster(38px);
    }
  }
}

.not-active {
  &::before {
    text-align: right;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: rgba(124, 128, 140, 0.5);
    z-index: -1;
    border-radius: 5px;
    transition-property: width, height;
    transition-duration: .5s;
  }

  &:hover {
    color: @fcc;

    span svg {
      fill: @fcc;
    }

    &::before {
      width: 100%;
      transition-property: width;
      transition-duration: 1s;
    }

    transition-property: color;
    transition-duration: .6s;
  }

}

.active {
  background: @sc;
  color: @ffc;

  svg {
    fill: @ffc;
  }
}

</style>
